<template>
  <div>
    <div>
      <h1 align="center">场 景 测 试 报 告</h1>
      <p align="right" style="font-weight: bold;">{{ execute_time }}</p>

    </div>

    <div style="display: flex;align-items: center;">
      <div id="main" style="width: 300px;height:300px;"></div>
      <div style="width: 190px;height: 105px;align-items: center;">
        <p style="font-weight: bold;">用例总数：{{ testcase_count }}</p>
        <p style="font-weight: bold;">通过数量：{{ success }}</p>
        <p style="font-weight: bold;">失败数量：{{ fail }}</p>
        <p style="font-weight: bold;">通过比例：{{ success_rate }} %</p>
        <p style="font-weight: bold;">执行总耗时：{{ run_time }}</p>
      </div>
    </div>


    <div>
      <Table
          stripe
          :columns="columns"
          :data="data"
          sortable="custom"
          ref="table"
          size="small"
          max-height="400"
      >
        <template slot-scope="{ row }" slot="project|interface">
          <strong>{{ row.project_name }} - {{ row.api_name }}</strong>
        </template>

        <template slot-scope="{ row }" slot="icon">
          <Icon v-if="row.failed_num <= 0" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/> <!--全部通过-->
          <Icon v-else-if="row.passed_num < 1" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/> <!--全部失败-->
          <Icon v-else type="ios-leaf" size="24" color="rgb(255, 153, 0)"/> <!--部分通过-->
        </template>
      </Table>
    </div>


  </div>
</template>

<script>
import expandRow from './table-expand'
import {reportssuite_details} from '../../api/api'

const echarts = require('echarts')

export default {
  name: "reports_suite",
  data() {
    return {
      execute_time: '',
      testcase_count: '',
      success: '',
      fail: '',
      success_rate: '',
      run_time: '',
      data: [],
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: "场景名称",
          key: "testsuite_name",
          width: 150,
          align: 'center'
        },
        {
          title: "项目",
          key: "project_name",
          width: 200,
          align: 'center'
        },
        {
          title: "用例总数",
          key: "count",
          width: 171,
          align: 'center'
        },
        {
          title: "通过数量",
          key: "passed_num",
          width: 170,
          align: 'center'
        },
        {
          title: "失败数量",
          key: "failed_num",
          align: "center",
          width: 170,
        },
        {
          title: "通过比例 %",
          key: "rate",
          align: "center",
          width: 150,
        },
        {
          title: "执行耗时(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 200,
        },
        {
          title: "场景ID",
          key: "id",
          width: 260,
          align: 'center'
        },
        {
          title: "测试结果",
          slot: "icon",
          align: "center",
          width: 94,
        },
      ],
    }
  },
  created() {
    this.getcaselist();

  }
  ,

  methods: {
    getcaselist() {
      let version = {'version': this.$route.params.id}
      reportssuite_details(version).then(res => {
        this.data = res.data.data
        this.testcase_count = res.data.count
        this.success = res.data.success
        this.fail = res.data.fail
        this.success_rate = res.data.success_rate
        this.run_time = res.data.run_time
        this.execute_time = this.data[0].execute_time
        this.showEchats1()
      })
    },

    showEchats1() {
      const myChart = echarts.init(document.getElementById('main'));
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '测试报告',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.success, name: '成功'},
              {value: this.fail, name: '失败'},
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
  ,
  mounted() {

  }
}
</script>

<style scoped>

</style>